<template>
  <!--插值指令:将此处显示的文本与响应式变量的值进行绑定
      如果修改变量的值,页面显示的文本也会随之改变-->
  <span>{{info}}</span>
  <p>{{info}}</p>
  <h1>{{info}}</h1>

  <!--响应式变量的值可以直接获取,也可以直接拼接-->
  {{info}}
  {{info+'周一愉快'}}
  <hr>
  <!--v-text等价于{{}}-->
  <p v-text="info"></p>
  <p v-html="info"></p>

  <button @click="f">点我</button>
</template>

<!--vue中,script标签中必须要添加setup,为vue中的语法规则-->
<script setup>
  import {ref} from "vue";
  //1.响应式变量
  const info = ref('我是A页面');
  //箭头函数
  const f = ()=>{
    //只有在JS中使用响应式变量的值时,必须.value
    info.value = '值<b>改变</b>了';
  }
</script>


<style scoped>

</style>
























